<template>
  <div class="app-content">
    <div id="flow-line-container"></div>
  </div>
</template>

<script>
import { Graph, Timing } from '@antv/x6'

export default {
  name: 'x6FlowLine',
  data() {
    return {
      graph: null,
    }
  },
  mounted() {
    this.initX6()
  },
  methods: {
    initX6() {
      this.graph = new Graph({
        container: document.getElementById('flow-line-container'),
        background: {
          color: '#F2F7FA',
        },
        autoResize: true,
      })

      this.renderNode()
      this.renderEdge()
    },
    renderNode() {
      this.graph.addNode({
        id: 'node1',
        position: { x: 100, y: 10 },
        size: { width: 100, height: 100 },
        label: '点击我',
      })

      this.graph.addNode({
        id: 'node2',
        position: { x: 300, y: 300 },
        size: { width: 100, height: 100 },
      })
    },
    renderEdge() {
      this.graph.addEdge({
        shape: 'flow-edge',
        id: '1001',
        source: 'node2',
        target: 'node1',
        vertices: [
          { x: 350, y: 250 },
          { x: 150, y: 250 },
        ],
        connector: {
          name: 'rounded',
          args: {},
        },
      })

      const edge1 = this.graph.getCellById('1001')

      const options1 = {
        delay: 0,
        duration: 3000,
        timing: Timing.linear,
        start(p) {
          console.log('[start]', p)
          edge1.updateAttrs(
            {
              circle: {
                fill: {
                  type: 'radialGradient',
                  stops: [
                    { offset: '0%', color: '#FFF' },
                    { offset: '100%', color: '#6692FF' },
                  ],
                },
              },
            },
            { silent: true }
          )
        },
        // progress(p) {
        //   console.log('[progress]', p)
        // },
        complete(p) {
          console.log('[complete]', p)
        },
        stop(p) {
          console.log('[stop]', p)
        },
        finish(p) {
          console.log('[finish]', p)
          edge1.updateAttrs(
            {
              circle: {
                atConnectionRatio: 0,
                stroke: 'transparent',
                fill: 'transparent',
              },
            },
            { silent: true }
          )
        },
      }

      this.graph.on('node:click', ({ node }) => {
        const isProgress = edge1
          .getTransitions()
          .includes('attrs/circle/atConnectionRatio')
        if (!isProgress && node.id === 'node1') {
          edge1.transition('attrs/circle/atConnectionRatio', 1, options1)
        }
      })
    },
  },
}
</script>
<style scoped>
.app-content {
  height: 400px;
}
</style>
